import { Button, Form, Input, Select, Space } from "antd";
import React, { useEffect } from "react";
import { useLocation, useNavigate } from 'react-router-dom'
import styles from './index.module.less'
const detailPage = () => {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const { state } = useLocation()

    useEffect(() => {
        // 编辑
        if (state) {
            const { name, age, address, status, key } = state.record;
            form.setFieldsValue({
                key,
                name,
                age,
                address,
                status: status ? '正常' : '异常'
            })

            return
        }
        // 新增
        console.log(state);

    }, [state])
    return (
        <div className={styles.detail}>
            <div className={styles.detail__head}>{'查看'}</div>
            <div className={styles.detail__content}>
                <Form form={form}>
                    <Form.Item name={'key'} className={styles.detail__hidden}>
                        <Input type="hidden" />
                    </Form.Item>
                    <Form.Item name={'name'} label={'姓名：'} rules={[{ required: true, message: '姓名不能为空!' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name={'age'} label={'年龄：'} rules={[{ required: true, message: '年龄不能为空!' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name={'address'} label={'地区：'} rules={[{ required: true, message: '地区不能为空!' }]}>
                        <Input />
                    </Form.Item>
                    {
                        state ? (
                            <Form.Item name={'status'} label={'状态：'} rules={[{ required: true, message: '状态不能为空!' }]} >
                                <Input />
                            </Form.Item>
                        ) : (
                            <Form.Item name={'status'} label={'状态：'} rules={[{ required: true, message: '状态不能为空!' }]}>
                                <Select>
                                    <Select.Option value="1">正常</Select.Option>
                                    <Select.Option value="0">异常</Select.Option>
                                </Select>
                            </Form.Item>
                        )
                    }
                    <Form.Item>
                        <Space>
                            <Button htmlType="submit">{'确定'}</Button>
                            <Button onClick={() => {
                                navigate(-1)
                            }}>{'返回'}</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default detailPage